<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树型菜单</title>
    <script src="jquery.min.js"></script>
</head>
<style>
    li {
        list-style: none;
    }

    .sub .title {
        height: 18px;
        font-size: 13px;
        vertical-align: top;
    }

    .sub .title span {
        display: inline-block;
        background-image: url("icon-tree_48f78c0.png");
        background-repeat: no-repeat;
        height: 18px;
        width: 22px;
        vertical-align: bottom;
        margin-right: 8px;
        cursor: pointer;
    }

    .sub .view {
        padding: 5px 20px;
    }
</style>

<body>
    <div class="main">

    </div>
    <script>
        var json = [
            {
                active: false,
                audioLength: null,
                audioinfoId: null,
                belong: 513,
                createTime: 1536805766000,
                fileSize: null,
                id: 20793,
                isdir: 1,
                name: "测试1",
                newUrl: null,
                pathPid: 527,
                status: 1,
                type: "folder"
            },
            {
                active: false,
                audioLength: null,
                audioinfoId: null,
                belong: 535,
                createTime: 1536805766000,
                fileSize: null,
                id: 20793,
                isdir: 1,
                name: "pang",
                newUrl: null,
                pathPid: 527,
                status: 1,
                type: "folder"
            },
            {
                active: false,
                audioLength: null,
                audioinfoId: null,
                belong: 555,
                createTime: 1536805766000,
                fileSize: null,
                id: 20793,
                isdir: 1,
                name: "水果",
                newUrl: null,
                pathPid: 527,
                status: 1,
                type: "folder"
            }
        ];
        var child = {

        }
        $(function () {
            var html = '';
            $.each(json, function (n, v) {
                html += `<div class="sub">
                            <div class="title">
                                <span onclick="openFolder(this,${v.belong})"></span>${v.name}
                            </div>
                            <div class="view">
                            </div>
                        </div>`
            })
            $('.main').html(html)
        })

        function openFolder(even, belong) {
            $(even).attr('onclick', 'closeFolder(this,' + belong + ')');
            var html = '';
            $.each(json, function (n, v) {
                html += `<div class="sub">
                            <div class="title">
                                <span onclick="openFolder(this,${v.belong})"></span>${v.name}
                            </div>
                            <div class="view">
                            </div>
                        </div>`
            })
            $(even).parent().next().html(html)
        }
        function closeFolder(even, belong) {
            $(even).attr('onclick', 'openFolder(this,' + belong + ')');
            $(even).parent().next().html('')
        }
    </script>
</body>

</html>